import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';

import { DatePicker, Select } from 'antd';
import notify from 'devextreme/ui/notify';
import { useModel } from 'umi';
import './_style.less';

const { RangePicker } = DatePicker;

const dateFormat = 'YYYY';

interface YearRangeProps {
  startDate: string; //2022
  endDate: string; //2024
  disabled?: boolean;
  onChangeCallBack?: any;
}

export interface FowardRefYearRange {
  getYearDateValue: () => {
    startYear: string;
    endYear: string;
    dates: string[];
  };
}

const YearRange = forwardRef(
  (props: YearRangeProps, ref: React.ForwardedRef<FowardRefYearRange>) => {
    const { startDate, endDate, disabled = false, onChangeCallBack = () => {} } = props;
    const ztModel = useModel('ztModel');

    const { ztDates } = ztModel;

    const selOptions = ztDates.map((item) => {
      return { label: item, value: item };
    });

    // 记录上一次,传递进来的props
    const lastDateRef = useRef<YearRangeProps>({
      startDate: '',
      endDate: '',
    });

    // 初始化props
    const [rangeValue, setRangeValue] = useState<any>(['', '']);

    // 对比props, props如果有变化则以props为准;
    useEffect(() => {
      const { startDate: lastStartDate, endDate: lastEndDate } = lastDateRef.current;
      if (startDate !== lastStartDate || endDate !== lastEndDate) {
        setRangeValue([startDate, endDate]);
      }
      lastDateRef.current = {
        startDate,
        endDate,
      };
    }, [startDate, endDate]);

    useImperativeHandle(
      ref,
      () => {
        return {
          getYearDateValue: () => {
            const startYear = rangeValue[0] ? rangeValue[0] : '';
            const endYear = rangeValue[1] ? rangeValue[1] : '';
            const dates = [];
            for (let i = startYear; i <= endYear; i++) {
              dates.push(i);
            }
            return {
              startYear,
              endYear,
              dates,
            };
          },
        };
      },
      [rangeValue],
    );

    /**
     * 日期范围change
     * @param value
     * @param dateString
     */
    const startChange = (value: string) => {
      if (parseInt(value) > parseInt(rangeValue[1])) {
        notify('起始日期应小于结束日期', 'error', 2000);
        return;
      }
      const newRangeValue = [...rangeValue];
      newRangeValue[0] = value;
      setRangeValue(newRangeValue);
    };

    const endChange = (value: string) => {
      if (parseInt(value) < parseInt(rangeValue[0])) {
        notify('起始日期应小于结束日期', 'error', 2000);
        return;
      }
      const newRangeValue = [...rangeValue];
      newRangeValue[1] = value;
      setRangeValue(newRangeValue);
    };

    return (
      <>
        <div style={{ display: 'flex' }}>
          <div style={{ paddingRight: 10 }}>
            <span style={{ paddingRight: 5, paddingLeft: 5 }}>年度：</span>
            <Select
              value={rangeValue[0]}
              style={{ width: 82 }}
              popupClassName="custom-select-content"
              onChange={startChange}
              options={selOptions}
              disabled={disabled}
              dropdownStyle={{ width: 86 }}
            />
          </div>
          <div>
            <span style={{ paddingRight: 10 }}>至</span>
            <Select
              value={rangeValue[1]}
              popupClassName="custom-select-content"
              style={{ width: 82 }}
              onChange={endChange}
              options={selOptions}
              disabled={disabled}
            />
          </div>
        </div>
      </>
    );
  },
);

export default YearRange;
